<template>
  <view class="container">
    <view class="user-info">
      <view class="avatar">
        <image :src="userInfo.avatar" mode="aspectFill"></image>
      </view>
      <view class="name">
        <text>{{ userInfo.username }}</text>
      </view>
    </view>

    <view class="menu">
      <view class="menu-item" @click="goToBookshelf">
        <text class="iconfont icon-shelf"></text>
        <text>我的书架</text>
      </view>
      <view class="menu-item" @click="goToReadingHistory">
        <text class="iconfont icon-history"></text>
        <text>阅读历史</text>
      </view>
      <view class="menu-item" @click="goToSettings">
        <text class="iconfont icon-settings"></text>
        <text>设置</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        avatar: "https://example.com/default-avatar.jpg",
        username: "登录/注册"
      }
    }
  },
  onLoad() {
    this.checkLoginStatus()
  },
  methods: {
    checkLoginStatus() {
      // 检查用户是否已登录
      const user = uni.getStorageSync("user")
      if (user) {
        this.userInfo = user
      } else {
        this.userInfo = {
          avatar: "https://example.com/default-avatar.jpg",
          username: "登录/注册"
        }
      }
    },
    goToBookshelf() {
      uni.navigateTo({
        url: "/pages/bookshelf/bookshelf"
      })
    },
    goToReadingHistory() {
      uni.navigateTo({
        url: "/pages/readingHistory/readingHistory"
      })
    },
    goToSettings() {
      uni.navigateTo({
        url: "/pages/settings/settings"
      })
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
}

.user-info {
  text-align: center;
  margin-bottom: 30px;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
}

.avatar image {
  width: 100%;
  height: 100%;
}

.name {
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
}

.menu {
  margin-top: 20px;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.menu-item text {
  margin-left: 10px;
}

.iconfont {
  font-size: 24px;
}
</style>